<template>
  <view class="wh_750 flex flex-column align-center pageHeight bg_F5F5F5">
    <s-header-title ref="headerTitle" isDisplayBack title="新建家谱" is-fixed background="#f5f5f5"
                    @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height: (Number(page.headerHeight) + 20) + 'px'}"></view>
    <view class="inputName flex align-center justify-center">
      <input v-model="familyTreeInfo.familyTreeName" placeholder="请输入家谱名称" :focus="familyNameFocus"
             placeholder-class="inputName_placeholder" @input="nameInput"></input>
    </view>
    <!--    <gapbar title="家谱名称" @elementClick="fillInTheFamilyTreeName">-->
    <!--      <template v-slot:content>-->
    <!--        <view class="newFamilyTree_gapbar_title_text">{{ familyTreeInfo.familyTreeName }}</view>-->
    <!--      </template>-->
    <!--    </gapbar>-->
    <view class="hW_20"></view>
    <gapbar title="所属地区" @elementClick="selectARegion">
      <template v-slot:content>
        <view class="newFamilyTree_gapbar_title_text fs_30 fw_500 color_4B4B4B flex flex-column align-end">
          <view>
            {{ familyTreeInfo.region }}
          </view>
          <view class="wh_380" style="text-align: end;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            {{ familyTreeInfo.region_address }}
          </view>
        </view>
      </template>
    </gapbar>
    <view class="hW_20"></view>
    <gapbar title="家谱简介" @elementClick="fillOutTheGenealogyProfile">
      <template v-slot:content>
        <view class="newFamilyTree_gapbar_title_text">
          {{
            familyTreeInfo.genealogyProfile.length > 8 ? familyTreeInfo.genealogyProfile.slice(0, 8) + '...' : familyTreeInfo.genealogyProfile
          }}
        </view>
      </template>
    </gapbar>
    <view class="hW_126"></view>
    <view class="newFamilyTree_button flex align-center justify-center"
          @click.stop="debounce(confirmGenealogy,1500,true)" :class="{
      buttonClass: buttonFlag
    }">
      确定
    </view>
    <!-- 家谱名称 -->
    <su-popup :show="namePopup.show" @maskClick="namePopupClose">
      <view class="namePopup flex align-center justify-center" :style="{
        paddingBottom: Number(page.inputBottomHeight) + 'px'
      }">
        <view class="flex align-center justify-between w-full" style="height: 109rpx;">
          <view class="namePopup_inputField flex align-center justify-center ml_24">
            <view class="wh_547">
              <uni-easyinput v-model="popup.nameValue"
                             maxlength="16"
                             :placeholder="popup.placeholder"
                             :inputBorder="false"
                             :focus="true"
                             :clearable="false"
              ></uni-easyinput>
            </view>
          </view>
          <view class="namePopup_confirm flex align-center justify-center mr_24" @click.stop="nameValueConfirm">
            完成
          </view>
        </view>
      </view>
    </su-popup>
    <!-- 所属地区 -->
    <su-region-picker title="所属地区"
                      :show="popup.showRegion"
                      @cancel="popup.showRegion = false"
                      @confirm="onRegionConfirm"
    >
    </su-region-picker>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import { computed, onMounted, reactive, ref } from 'vue';
  import Gapbar from '@/pages/genealogy/components/gapbar.vue';
  import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import debounce from '@/sheep/helper/debounce';

  const page = reactive({
    headerHeight: 0,
    inputBottomHeight: 15,
  });
  const namePopup = reactive({
    show: false,
  });
  const familyTreeInfo = reactive({
    familyTreeName: '',
    region: '',
    genealogyProfile: '',
  });
  const popup = reactive({
    nameValue: '',
    placeholder: '请输入家谱名称',
    showRegion: false,
  });

  const buttonFlag = computed(() => {
    return !!(familyTreeInfo.familyTreeName && familyTreeInfo.region);
  });
  const familyNameFocus = ref(false);

  onMounted(() => {
    familyNameFocus.value = true;
  });

  onLoad(() => {
    sheep.$api.data.area().then((res) => {
      if (res.code === 1) {
        uni.setStorageSync('areaData', res.data);
      }
    });
  });

  function nameInput(e) {
    if (e.detail.value.length > 12) {
      familyTreeInfo.familyTreeName = e.detail.value.substring(0, 12);
    }
  }

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 家谱名称
  function fillInTheFamilyTreeName() {
    namePopup.show = true;
  }

  function namePopupClose() {
    namePopup.show = false;
  }

  function nameValueConfirm() {
    if (!popup.nameValue) {
      uni.showToast({
        title: '请输入家谱名称',
        icon: 'none',
      });
      return;
    }
    familyTreeInfo.familyTreeName = popup.nameValue;
    namePopup.show = false;
    popup.nameValue = '';
  }

  function selectARegion() {
    // popup.showRegion = true;
    uni.setStorageSync('createAddress', {
      type: 3,
      info: {
        region: familyTreeInfo.region,
        region_address: familyTreeInfo.region_address,
      },
    });
    sheep.$router.go('/pages/extend/createAddress');
    uni.$on('current_residence', (data) => {
      if (!data) {
        uni.$off('current_residence');
        return;
      }
      familyTreeInfo.region = data.info.region;
      familyTreeInfo.region_address = data.info.region_address;
    });
  }

  function onRegionConfirm(e) {
    familyTreeInfo.region = e.province_name + '-' + e.city_name + '-' + e.district_name;
    popup.showRegion = false;
  }

  function fillOutTheGenealogyProfile() {
    uni.$once('setSignature', (e) => {
      familyTreeInfo.genealogyProfile = e;
    });
    sheep.$router.go('/pages/genealogy/genealogicalIntroduction');
  }

  async function confirmGenealogy() {
    if (!familyTreeInfo.familyTreeName) {
      uni.showToast({
        title: '家谱名称不能为空',
        icon: 'none',
      });
      return;
    }
    if (!familyTreeInfo.region) {
      uni.showToast({
        title: '请选择所属地区',
        icon: 'none',
      });
      return;
    }
    const { code } = await sheep.$api.genealogy.addGenealogy({
      title: familyTreeInfo.familyTreeName,
      city: familyTreeInfo.region,
      city_address:familyTreeInfo.region_address,
      remark: familyTreeInfo.genealogyProfile,
    });
    if (code == 1) {
      uni.showToast({
        title: '创建成功',
        icon: 'none',
      });
      sheep.$store('family').getFamilyTree();
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
</script>


<style scoped lang="scss">
  .newFamilyTree_button {
    width: 362rpx;
    height: 80rpx;
    background: #9F9F9F;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
  }

  .buttonClass {
    background: #FF4206 !important;
  }

  .namePopup {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 750rpx;
    background: #FFFFFF;
    overflow: hidden;

    .namePopup_inputField {
      width: 577rpx;
      height: 80rpx;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .namePopup_inputField_input {
        width: 537rpx;
        height: 100%;
      }
    }

    .namePopup_confirm {
      width: 115rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 23rpx;
      color: #FFFFFF;
    }
  }

  .inputName {
    width: 702rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    input {
      width: 662rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }
</style>
